<template>
    <L7MapWithGaode :mapOnloadCB="mapOnloadCB"></L7MapWithGaode>
</template>

<script lang="ts">
import {Scene, PolygonLayer, PointLayer, LineLayer} from '@antv/l7';
import {defineComponent, onMounted, ref} from "vue"
import L7MapWithGaode from "@/component/common/L7MapWithGaode.component.vue"

export default defineComponent({
    name: "L7.addScatter1",
    components: {L7MapWithGaode},
    setup() {

        const mapOnloadCB = (scene: Scene) => {
            scene.setZoomAndCenter(6.45, [-121.24357, 37.58264])

            fetch(`${window.location.origin}/antv-test/data/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv`)
                .then(res => res.text())
                .then(data => {
                    const pointLayer = new PointLayer({})
                        .source(data, {
                            parser: {
                                type: 'csv',
                                x: 'Longitude',
                                y: 'Latitude'
                            }
                        })
                        .shape('circle')
                        .size(4)
                        .active(true)
                        .color('Magnitude', [
                            '#0A3663',
                            '#1558AC',
                            '#3771D9',
                            '#4D89E5',
                            '#64A5D3',
                            '#72BED6',
                            '#83CED6',
                            '#A6E1E0',
                            '#B8EFE2',
                            '#D7F9F0'
                        ])
                        .style({
                            opacity: 0.5,
                            strokeWidth: 0
                        });

                    scene.addLayer(pointLayer);
                })
        }

        return {
            mapOnloadCB
        }
    }
})
</script>

<style scoped>

</style>
